<template>
  <div>
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" v-if="role =='admin'">
        <chart-card :loading="loading" title="学生人数" :total="admin.student_nums">
          <a-tooltip title="系统学生人数" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
		  <div>
		    <mini-area />
		  </div>
        </chart-card>
      </a-col>
	  <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" v-if="role =='admin'">
	    <chart-card :loading="loading" title="企业数量" :total="admin.company_nums">
	      <a-tooltip title="系统入驻企业数量" slot="action">
	        <a-icon type="info-circle-o" />
	      </a-tooltip>
		  <div>
		    <mini-bar />
		  </div>
	    </chart-card>
	  </a-col>
	  <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" v-if="role =='admin'">
	    <chart-card :loading="loading" title="系统管理员数量" :total="admin.admin_nums">
	      <a-tooltip title="包括管理员和教师" slot="action">
	        <a-icon type="info-circle-o" />
	      </a-tooltip>
	  		  <div>
	  		    <mini-area />
	  		  </div>
	    </chart-card>
	  </a-col>
	  <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" v-if="role =='admin'">
	    <chart-card :loading="loading" title="已就业人数" :total="admin.employment_nums">
	      <a-tooltip title="已被企业录用的学生人数" slot="action">
	        <a-icon type="info-circle-o" />
	      </a-tooltip>
		  <div>
		    <mini-progress color="rgb(19, 194, 194)"  :percentage="(admin.employment_nums / admin.student_nums) * 100" height="8px" />
		  </div>
	    </chart-card>
	  </a-col>
	  <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" v-if="role =='admin'">
	    <chart-card :loading="loading" title="招聘岗位数量" :total="admin.job_nums">
	      <a-tooltip title="当前系统正在招聘的岗位数量" slot="action">
	        <a-icon type="info-circle-o" />
	      </a-tooltip>
		  <div>
		    <mini-bar />
		  </div>
	    </chart-card>
	  </a-col>
	  <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" v-if="role =='student'">
	    <chart-card :loading="loading" title="已投递岗位" :total="student.apply_job_nums">
	      <a-tooltip title="当前已投递岗位" slot="action">
	        <a-icon type="info-circle-o" />
	      </a-tooltip>
		  <div>
		    <mini-bar />
		  </div>
	    </chart-card>
	  </a-col>
	  <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" v-if="role =='student'">
	    <chart-card :loading="loading" title="已通过岗位" :total="student.apply_job_pass_nums">
	      <a-tooltip title="当前审核通过岗位" slot="action">
	        <a-icon type="info-circle-o" />
	      </a-tooltip>
		  <div>
		    <mini-progress color="rgb(19, 194, 194)"  :percentage="(student.apply_job_pass_nums/student.apply_job_nums) * 100" height="8px" />
		  </div>
	    </chart-card>
	  </a-col>
	  <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" v-if="role =='student'">
	    <chart-card :loading="loading" title="已收到offer" :total="student.get_offer_nums">
	      <a-tooltip title="自己已收到offer" slot="action">
	        <a-icon type="info-circle-o" />
	      </a-tooltip>
		  <div>
		    <mini-area />
		  </div>
	    </chart-card>
	  </a-col>
	  <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" v-if="role =='student'">
	    <chart-card :loading="loading" title="已确认offer" :total="student.get_offer_pass_nums">
	      <a-tooltip title="当前审核通过岗位" slot="action">
	        <a-icon type="info-circle-o" />
	      </a-tooltip>
	  		  <div>
	  		    <mini-progress color="rgb(19, 194, 194)"  :percentage="(student.get_offer_pass_nums/student.get_offer_nums) *100" height="8px" />
	  		  </div>
	    </chart-card>
	  </a-col>
	  
	  <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" v-if="role =='teacher'">
	    <chart-card :loading="loading" title="已发布的公告" :total="teacher.notice_nums">
	      <a-tooltip title="当前已经发布的公告" slot="action">
	        <a-icon type="info-circle-o" />
	      </a-tooltip>
	  		  <div>
	  		    <mini-area />
	  		  </div>
	    </chart-card>
	  </a-col>
	  <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" v-if="role =='teacher'">
	    <chart-card :loading="loading" title="待审核招聘" :total="teacher.review_recruit_nums">
	      <a-tooltip title="待审核招聘" slot="action">
	        <a-icon type="info-circle-o" />
	      </a-tooltip>
	  		  <div>
	  		    <mini-area />
	  		  </div>
	    </chart-card>
	  </a-col>
	  <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" v-if="role =='teacher'">
	    <chart-card :loading="loading" title="审核通过招聘" :total="teacher.review_pass_nums">
	      <a-tooltip title="审核通过招聘" slot="action">
	        <a-icon type="info-circle-o" />
	      </a-tooltip>
	  		  <div>
	  		    <mini-area />
	  		  </div>
	    </chart-card>
	  </a-col>
	  
	  <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" v-if="role =='company'">
	    <chart-card :loading="loading" title="已收到的简历" :total="company.get_recruit_nums">
	      <a-tooltip title="当前已收到的简历" slot="action">
	        <a-icon type="info-circle-o" />
	      </a-tooltip>
	  		  <div>
	  		    <mini-area />
	  		  </div>
	    </chart-card>
	  </a-col>
	  <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" v-if="role =='company'">
	    <chart-card :loading="loading" title="审核通过简历" :total="company.audit_recruit_pass_nums">
	      <a-tooltip title="当前审核通过的简历" slot="action">
	        <a-icon type="info-circle-o" />
	      </a-tooltip>
		  <div>
		    <mini-progress color="rgb(19, 194, 194)" :percentage="(company.audit_recruit_pass_nums/company.get_recruit_nums)*100" height="8px" />
		  </div>
	    </chart-card>
	  </a-col>
	  <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" v-if="role =='company'">
	    <chart-card :loading="loading" title="发放Offer" :total="company.send_pass_nums">
	      <a-tooltip title="发放的所有Offer" slot="action">
	        <a-icon type="info-circle-o" />
	      </a-tooltip>
		  <div>
		    <mini-area />
		  </div>
	    </chart-card>
	  </a-col>
	  <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" v-if="role =='company'">
	    <chart-card :loading="loading" title="已录用人数" :total="company.send_offer_pass_nums">
	      <a-tooltip title="已录用人数" slot="action">
	        <a-icon type="info-circle-o" />
	      </a-tooltip>
		  <div>
		    <mini-progress color="rgb(19, 194, 194)"  :percentage="(company.send_offer_pass_nums/company.send_pass_nums)*100" height="8px" />
		  </div>
	    </chart-card>
	  </a-col>

      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" v-if="role =='admin'">
        <chart-card :loading="loading" title="访问量" :total="8846 | NumberFormat">
          <a-tooltip title="访问量" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area />
          </div>
        </chart-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import moment from 'moment'
import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
} from '@/components'
import { baseMixin } from '@/store/app-mixin'
import { getAdminData, getStudentData, getCompanyData, getTeacherData } from '@/api/account'
import { LOGIN_ID } from '@/store/mutation-types'
import storage from 'store'


export default {
  name: 'Analysis',
  mixins: [baseMixin],
  components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress
  },
  data () {
    return {
      loading: true,
	  role: "",
	  admin:{},
	  student: {},
	  company: {},
	  teacher:{}
    }
  },
  created () {
	this.role = this.$store.getters.roles[0]
	if(this.role == "admin"){
		getAdminData().then(res=> {
			if (res.code == 200) {
				this.admin = res.data
				this.loading = false
			}
		})	
	}
	if(this.role == "student"){
		getStudentData(storage.get(LOGIN_ID)).then(res=> {
			if (res.code == 200) {
				this.student = res.data
				this.loading = false
			}
		})	
	}
	if(this.role == "company"){
		this.loading = false
		getCompanyData(storage.get(LOGIN_ID)).then(res=> {
			if (res.code == 200) {
				this.company = res.data
				this.loading = false
			}
		})	
	}
	if(this.role == "teacher"){
		getTeacherData(storage.get(LOGIN_ID)).then(res=> {
			if (res.code == 200) {
				this.teacher = res.data
				this.loading = false
			}
		})	
	}
  }
}
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .antd-pro-pages-dashboard-analysis-twoColLayout {
    position: relative;
    display: flex;
    display: block;
    flex-flow: row wrap;
  }

  .antd-pro-pages-dashboard-analysis-salesCard {
    height: calc(100% - 24px);
    :deep(.ant-card-head) {
      position: relative;
    }
  }

  .dashboard-analysis-iconGroup {
    i {
      margin-left: 16px;
      color: rgba(0,0,0,.45);
      cursor: pointer;
      transition: color .32s;
      color: black;
    }
  }
  .analysis-salesTypeRadio {
    position: absolute;
    right: 54px;
    bottom: 12px;
  }
</style>
